<template>
  <div class="tiptap-container">
    <h2>TipTap 编辑器</h2>
    <div class="editor-wrapper">
      <div class="simple-editor-toolbar">
        <button @click="formatText('bold')">粗体</button>
        <button @click="formatText('italic')">斜体</button>
        <button @click="formatText('underline')">下划线</button>
        <button @click="formatText('strikeThrough')">删除线</button>
        <button @click="formatText('formatBlock', '<h1>')">标题1</button>
        <button @click="formatText('formatBlock', '<h2>')">标题2</button>
        <button @click="formatText('insertOrderedList')">有序列表</button>
        <button @click="formatText('insertUnorderedList')">无序列表</button>
        <button @click="insertLink()">插入链接</button>
        <button @click="insertImage()">插入图片</button>
        <button @click="formatText('formatBlock', '<blockquote>')">引用</button>
        <button @click="formatText('justifyLeft')">左对齐</button>
        <button @click="formatText('justifyCenter')">居中</button>
        <button @click="formatText('justifyRight')">右对齐</button>
        <button @click="formatText('undo')">撤销</button>
        <button @click="formatText('redo')">重做</button>
      </div>
      <div 
        ref="editorRef" 
        class="simple-editor-content" 
        contenteditable="true"
        @input="handleInput"
      >欢迎使用 TipTap 编辑器！</div>
    </div>

    <div class="content-preview" v-if="showPreview">
      <h3>内容预览</h3>
      <div v-html="content"></div>
    </div>
    
    <div class="actions">
      <el-button type="primary" @click="togglePreview">{{ showPreview ? '隐藏预览' : '显示预览' }}</el-button>
      <el-button type="success" @click="saveContent">保存内容</el-button>
      <el-button @click="clearContent">清空内容</el-button>
      <el-button type="info" @click="loadSavedContent">加载保存的内容</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const editorRef = ref(null)
const content = ref('')
const showPreview = ref(false)
const STORAGE_KEY = 'tiptap_editor_content'

// 格式化文本
const formatText = (command, value = null) => {
  document.execCommand(command, false, value)
  editorRef.value.focus()
}

// 插入链接
const insertLink = () => {
  const url = prompt('请输入链接URL:')
  if (url) {
    document.execCommand('createLink', false, url)
  }
}

// 插入图片
const insertImage = () => {
  const url = prompt('请输入图片URL:')
  if (url) {
    document.execCommand('insertImage', false, url)
  }
}

// 处理输入
const handleInput = () => {
  if (editorRef.value) {
    content.value = editorRef.value.innerHTML
  }
}

// 切换预览
const togglePreview = () => {
  showPreview.value = !showPreview.value
  if (showPreview.value && editorRef.value) {
    content.value = editorRef.value.innerHTML
  }
}

// 保存内容到本地存储
const saveContent = () => {
  if (editorRef.value) {
    const editorContent = editorRef.value.innerHTML
    localStorage.setItem(STORAGE_KEY, editorContent)
    ElMessage.success('内容已保存')
  }
}

// 加载保存的内容
const loadSavedContent = () => {
  const savedContent = localStorage.getItem(STORAGE_KEY)
  if (savedContent && editorRef.value) {
    editorRef.value.innerHTML = savedContent
    content.value = savedContent
    ElMessage.success('已加载保存的内容')
  } else {
    ElMessage.warning('没有找到保存的内容')
  }
}

// 清空编辑器内容
const clearContent = () => {
  if (!editorRef.value) return
  
  ElMessageBox.confirm('确定要清空编辑器内容吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    editorRef.value.innerHTML = ''
    content.value = ''
    ElMessage.success('内容已清空')
  }).catch(() => {
    // 取消操作
  })
}

onMounted(() => {
  // 检查是否有保存的内容
  const savedContent = localStorage.getItem(STORAGE_KEY)
  if (savedContent && editorRef.value) {
    editorRef.value.innerHTML = savedContent
    ElMessage.info('已加载上次保存的内容')
  }
})
</script>

<style>
.tiptap-container {
  max-width: 900px;
  margin: 20px auto;
  padding: 20px;
}

.editor-wrapper {
  margin-bottom: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.simple-editor-toolbar {
  padding: 10px;
  border-bottom: 1px solid #dcdfe6;
  background-color: #f5f7fa;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.simple-editor-toolbar button {
  padding: 5px 10px;
  border: 1px solid #dcdfe6;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.simple-editor-toolbar button:hover {
  background-color: #ecf5ff;
}

.simple-editor-content {
  padding: 15px;
  min-height: 300px;
  outline: none;
}

.simple-editor-content:focus {
  outline: none;
}

.content-preview {
  margin-top: 30px;
  padding: 15px;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

/* 图片样式 */
.simple-editor-content img {
  max-width: 100%;
  height: auto;
}

/* 引用样式 */
.simple-editor-content blockquote {
  border-left: 3px solid #dcdfe6;
  padding-left: 10px;
  color: #606266;
  margin: 10px 0;
}

/* 标题样式 */
.simple-editor-content h1 {
  font-size: 24px;
  margin: 16px 0;
}

.simple-editor-content h2 {
  font-size: 20px;
  margin: 14px 0;
}

/* 列表样式 */
.simple-editor-content ul,
.simple-editor-content ol {
  padding-left: 20px;
  margin: 10px 0;
}
</style> 